<template>
	<view class="nav-bar">	
	
		<view class="nav-bar-top">
			
			<view  :style="{height:statusBarHeight+'rpx'}"></view>
			
			<!-- 当为搜索界面时，展示回退按钮 -->
			<view class="return-icon" :style="{top:statusBarHeight+'rpx'}" v-if="isSearch" @click="homeBack">
				<uni-icons size="22" type="back"  color="#fff"></uni-icons>
			</view>
			
			
			<view @click="handleClick" class="nav-bar-content" :style="{marginRight:MpRight+'rpx',marginLeft:isSearch ? '40rpx' : ''}">
				<uni-icons type="search" color="#999" size="20"></uni-icons>
				<view class="nav-bar-text" v-if="!isSearch">
					请输入搜索内容
				</view>
				<input v-else type="text" v-model.trim="searchVal"  confirm-type="search" class="search-input" placeholder="输入文章内容进行搜索"  @confirm="handleConfirm">
			</view>
		</view>
		<view :style="{height:statusBarHeight + 80 + 'rpx'}">
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"NavBar",
		props:{
			isSearch:{
				type:Boolean,
				default:false
			},
			parentVal:{
				type:String
			}
		},
		data() {
			return {
				statusBarHeight:20,
				MpRight:0,
				timeId:null
			};
		},
		created() {
			//初始化获取手机信息
			this.initSysteminfo()
		},
		computed: {
			searchVal:{
				get() {
					return this.parentVal
				},
				set(val) {
					this.$emit("updataVal",val)
					if(!val){
						this.$emit("sendSearchData")
					}
				}
			}
		},
		methods:{
			//获取手机信息
			initSysteminfo(){
				const info = uni.getSystemInfoSync()
				if(info.statusBarHeight===0){
					return
				}else{
					this.statusBarHeight = info.statusBarHeight *2
					// #ifdef MP-WEIXIN
					//获取小程序侧边胶囊数据
					const buttonInfo = uni.getMenuButtonBoundingClientRect()
					this.statusBarHeight = buttonInfo.top *2
					this.MpRight = buttonInfo.width*2
					// #endif
				}				
			},
			//点击跳转搜索页面搜索
			handleClick(){
				if(this.isSearch)return
						//跳转到搜索页面
				uni.navigateTo({
					url:"/pages/search/search"
				})
			},
			//点击返回首页
			homeBack(){
				// #ifdef H5
				uni.switchTab({
					url:"/pages/index/index"
				})
				// #endif
				// #ifndef H5
					uni.navigateBack()
				// #endif
			
			},
			//搜索输入的内容
			handleConfirm(data){
				this.$emit("sendSearchData")
			}
		}
	}
</script>

<style  lang="scss"  scoped>
	@import 'css/NvaBar.scss';

</style>